import React, { Component } from 'react';
import { NavBar, Space, Toast } from 'antd-mobile'
import service from '../api';
import '../styles/Order.scss'
class Order extends Component {
    constructor(props) {
        super(props)
        this.state = {
            userid: '',
            list: [],
            addlist: {},
            sum: ''
        }
    }
    async componentDidMount() {
        this.setState({ sum: JSON.parse(localStorage.getItem('sum')) })
        var res = await service.order.order_confirmOrder({ userid: localStorage.getItem('userid'), time: JSON.parse(localStorage.getItem('time')) })
        this.setState({ list: res.data.data })

        if(this.props.location.state){
            this.setState({addlist:this.props.location.state.item})
        }else{
        var res1 = await service.address.address_defaultAddress({ userid: localStorage.getItem('userid') })
        console.log(res1.data.data);
        this.setState({ addlist: res1.data.data[0] })
        }
    }
    back() {
        this.props.history.go(-1)
    }
    address() {
        this.props.history.push('/address')
    }
    async result() {
        var res = await service.order.order_deleteCartItem({ userid: localStorage.getItem('userid') })
        this.props.history.push('/result')
    }
    render() {
        return (
            <div className='order'>
                <div className="top">
                    <NavBar onBack={() => { this.back() }}>
                        订单详情
                    </NavBar>
                </div>
                <div className="dizhi">

                    <div className="one">
                        <div className="left">
                            <div className="bx">
                                <p>收货地址：</p>
                                <div className="phone">{this.state.addlist&&this.state.addlist.name}</div>
                                <div className="city">{this.state.addlist&&this.state.addlist.tel}</div>
                            </div>
                            <div className="icon">
                                <span className='iconfont icon-youjiantou' onClick={() => { this.address() }}></span>
                            </div>
                        </div>
                        <div className="right">{this.state.addlist&&this.state.addlist.province}{this.state.addlist&&this.state.addlist.city}{this.state.addlist&&this.state.addlist.county}{this.state.addlist&&this.state.addlist.addressDetail}</div>
                    </div>

                </div>
                <div className="shop">
                    {
                        this.state.list.map((item, index) => {
                            return (

                                <div className="box" key={index}>
                                    <div className="imgs">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="text">
                                        <div className="proname">{item.proname}</div>
                                        <div className="price">
                                            <span className='jiage'>{item.originprice}</span>
                                            <span className='jiage'>x{item.num}</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="tabbar">
                    <div className="heji">
                        <span>合计:</span>
                        <span className='zongjia'>{this.state.sum}</span>
                    </div>
                    <button onClick={() => { this.result() }}>去支付</button>
                </div>
            </div>
        );
    }
}

export default Order;